<!-- 蓝色登录页面2 -->
<template>
	<view class="wrap">
		<!-- 头部 -->
		<view class="img-a">
			<view class="t-b">
				{{ isLoginPage ? '你好，' : '重置密码' }}
				<br />
				{{ isLoginPage ? '请登录' : 'RESET' }}
			</view>
		</view>

		<!-- 登录组件 -->
		<Login :isLoginPage="isLoginPage" @handleChangeScene="handleChangeScene"></Login>

		<!-- 忘记密码组件 -->
		<Forget :isLoginPage.sync="isLoginPage" @handleChangeScene="handleChangeScene" @handleChangeModal="handleChangeModal"></Forget>

		<!-- 重置成功后的提示窗口 -->
		<view><u-modal v-model="isShowModal" :content="modalText" @confirm="handleConfirm"></u-modal></view>
	</view>
</template>
<script>
import Forget from './forget.vue'
import Login from './login.vue'

export default {
	components: {
		Forget,
		Login
	},
	data() {
		return {
			isLoginPage: true, // 显示登录页面/忘记密码页
			isShowModal: false, // 显示模态框
			modalText: '' // 模态框文字
		}
	},
	computed: {
		title() {}
	},
	methods: {
		/* 切换登录和忘记密码的场景 */
		handleChangeScene(scene) {
			this.isLoginPage = scene
		},
		/* 切换弹框的显示与隐藏 */
		handleChangeModal(show, text) {
			this.isShowModal = show
			this.modalText = `重置成功，你的密码为：${text}`
		},
		/* 点击模态框的确认按钮回调 */
		handleConfirm() {
			// 切换场景显示登陆界面
			this.isLoginPage = true
		}
	}
}
</script>
<style scoped lang="scss">
.wrap {
	height: 100vh;
	background-color: #fff;
	.img-a {
		width: 100%;
		height: 450rpx;
		background-image: url('https://i.niupic.com/images/2022/01/04/9SQC.png');
		background-size: 100%;
		.t-b {
			text-align: left;
			font-size: 42rpx;
			color: #ffffff;
			padding: 130rpx 0 0 70rpx;
			font-weight: bold;
			line-height: 70rpx;
		}
	}
}
</style>
